<template>
    <div id="disk" style="width: 100%;">
		    <div style="width: 100%;height: 40px;padding: 10px;">
				<Button type="primary" to="/Seafile_Login" style="float: right;">添加Seafile账号</Button>
				<h2 style="text-align: center;padding-left: 180px;margin-top: 2px;">Seafile账号管理</h2>
			</div>
			 
              
     
             <div>
            <ul v-for="(item,index) in arr" class="ullist" @contextmenu="showMenu(index)">
        <vue-context-menu :contextMenuData="contextMenuData" @deleted="deleted" @NewFile="NewFile"></vue-context-menu>
       <div style="padding:20px;" @dblclick="dbclick(index)">
            <img :src="item.avatar_url"  style="width:70px;height:70px;float:left;">
            <div style="margin-top:10px;user-select: none;">
                <h2 style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.name}}</h2>
                <h4 >{{item.contact_email}}</h4>
            </div>
			
       </div>
       </ul>
         </div>   
    </div>
</template>
<script>
var exec = require("child_process");
var fs = require('fs')
export default {
    data(){
        return{
            arr:[],
            list:[],
            contextIndex:'',
            contextMenuData: {
					menuName: 'demo',
					//菜单显示的位置
					axis: {
						x: null,
						y: null
					},
					//菜单选项
					menulists: [{
						fnHandler: 'deleted', //绑定事件
						btnName: '删除', //菜单名称
					}, {
						fnHandler: 'NewFile',
						btnName: '重命名'
					}]
				},
        }
    },
    mounted(){
         // 读取配置文件 已经保存的NFS磁盘
            fs.readFile('./Seafile.ini', 'utf-8', (err, data)=> {
                if (err) {
                    throw err;
                }
                // 读取配置文件 并转换成json数组
               var arrjson = eval(data)
                this.arr = arrjson
                console.log(this.arr)
            });
    },
    methods:{
        ok () {
            },
            // 右键菜单
            showMenu(index) {
				event.preventDefault()
				var x = event.clientX
				var y = event.clientY
				// Get the current location
				this.contextMenuData.axis = {
					x,
					y
				}
				this.contextIndex = index
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            deleted(){

                const index = this.contextIndex
                console.log(index)

            this.arr.splice(index,index+1);
            console.log(this.arr)

            // 将NFS数组转换成字符串
            // 写入test.ini 配置文件中
            console.log(JSON.stringify(this.arr))
            fs.writeFile('./Seafile.ini', JSON.stringify(this.arr), (err)=> {
                if (err) {
                    throw err;
                }
                console.log('写入成功');
            });
        },
            // 双击标签事件
            dbclick(index){
               console.log(index)
               console.log(this.arr[index])
               window.localStorage.setItem('Token',this.arr[index].token)
               this.$router.push('/Seafile_Home')
            }
    }
}
</script>

<style>
	.ullist{
		float: left;
		margin: 30px;
	}
</style>